<template>
  <div class="box">
    <img class="bg" src="../../../assets/image/shop/msgbg.png" alt="" />

    <div class="mainbox">
      <div class="left">
        <div class="shopname">
          <span>{{ storeData.storeName }}</span>
          <img src="../../../assets/image/shop/jiangpai.png" alt="" />
          <img src="../../../assets/image/shop/king.png" alt="" />
        </div>

        <div class="shoplink">
          <div>http://www.{{ storeData.storeDomainName }}.wjtzw.cn</div>
          <div class="button" v-if="storeData.collection">已关注</div>
          <div class="button" @click="saveStoreCollection" v-else>关注店铺</div>
        </div>

        <div class="shoplabel">
          <div class="label">官方认证商家</div>
          <div class="label label1" v-if="storeData.returnGoods">
            支持15天退货
          </div>
          <div class="label label2" v-if="storeData.exchangeGoods">
            支持15天换货
          </div>
          <!-- <div class="label label3">3年店</div> -->
        </div>
      </div>

      <div class="right">
        <div class="left">
          <div class="input">
            <el-input
              placeholder="搜本店商品"
              suffix-icon="el-icon-search"
              v-model="input"
              @blur="query"
            ></el-input>
          </div>

          <div class="adress">{{ storeData.storeAddressDetail }}</div>

          <div class="lianxibox">
            <div class="weixin">
              <img src="../../../assets/image/shop/weixin.png" alt="" />
              <span v-if="show && storeData.storeVx">
                {{ storeData.storeVx | phoneFilter }}</span
              >
              <span v-else> {{ storeData.storeVx }}</span>
            </div>
            <div class="phone weixin">
              <img src="../../../assets/image/shop/phone.png" alt="" />
              <span v-if="show && storeData.storePhone">{{
                storeData.storePhone | phoneFilter
              }}</span>
              <span v-else>{{ storeData.storePhone }}</span>
            </div>
            <div class="qq weixin">
              <!-- <img src="../../../assets/image/shop/qq.png" alt="" /> -->
              <i class="el-icon-s-comment
"></i>
              <span v-if="show && storeData.storeEmail">{{
                storeData.storeEmail | phoneFilter
              }}</span>
              <span v-else>{{ storeData.storeEmail }}</span>
            </div>
            <div style="cursor:pointer;" class="show weixin" @click="show = false">
              <img src="../../../assets/image/shop/show.png" alt="" />
              点击显示
            </div>
          </div>
        </div>

        <div class="qrcode">
          <img :src="storeData.storeQrcode" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { saveStoreCollection } from "@/api/MyCollection";
import { getToken, removeToken } from "@/utils/auth";
export default {
  props: ["storeData"],
  components: {},

  data() {
    return {
      input: "",
      show: true,
    };
  },
  filters: {
    //手机号过滤器
    phoneFilter(val) {
      if (val) {
        let reg = /^(.{3}).*(.{4})$/;
        return val.replace(reg, "$1****$2");
      }
    },
  },
  created() {},
  methods: {
    query() {
      this.$parent.params.goodsName = this.input;
      this.$parent.selectAllByParamsOnStoreByStoreId();
    },
    //收藏店铺
    saveStoreCollection() {
      const token = getToken();
      if (token) {
        saveStoreCollection({
          idList: `${this.storeData.id}`,
        }).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "关注成功",
              type: "success",
            });
            this.$parent.pmsStore(this.storeData.id);
          }
        });
      } else {
        this.$message({
          message: "请先登陆！",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1b2017;
  position: relative;
  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .mainbox {
    width: 11.2rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    .left {
      padding: 0.05rem 0rem;
      width: 4.5rem;
      height: calc(100% - 0.1rem);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      .shopname {
        font-size: 0.32rem;
        color: #e9e965;
        height: auto;
        display: flex;
        align-items: center;
        img {
          margin-left: 0.12rem;
        }
      }
      .shoplink {
        font-size: 0.16rem;
        color: #e9e965;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .button {
          margin-left: 0.12rem;
          font-size: 0.14rem;
          width: 0.8rem;
          height: 0.22rem;
          line-height: 0.24rem;
          text-align: center;
          border-radius: 0.2rem;
          border: 0.01rem solid #e9e965;
          cursor: pointer;
        }
      }
      .shoplabel {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .label:first-child {
          margin-left: 0rem;
        }
        .label {
          width: auto;
          padding: 0rem 0.06rem;
          margin-left: 0.1rem;
          height: 0.24rem;
          line-height: 0.24rem;
          font-size: 0.14rem;
          color: #000000;
          text-align: center;
          background: #dea06a;
          border-radius: 0.04rem;
        }
        .label1 {
          background: #07c160;
        }
        .label2 {
          background: #07c160;
        }
        .label3 {
          background: #e9e965;
        }
      }
    }
    .right {
      padding: 0.1rem 0rem;
      // width: 5rem;
      height: calc(100% - 0.2rem);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        margin-right: 0.1rem;
        // width: 3.84rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        .input {
          width: 2.84rem;
          height: 0.38rem;
          display: flex;
          align-items: center;
          ::v-deep .el-input__inner {
            border: 1px solid #e9e965 !important;
            color: #e9e965 !important;
            background: rgba(255, 199, 14, 0.1) !important;
          }
          ::v-deep .el-input__suffix {
            color: #e9e965 !important;
          }
          ::v-deep .el-input__inner::placeholder {
            color: #e9e965 !important;
          }
        }
        .adress {
          font-size: 0.14rem;
          color: #e9e965;
        }
        .lianxibox {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.12rem;
          color: #e9e965;
          .weixin {
            display: flex;
            align-items: center;
            img {
              width: 0.16rem;
              height: 0.16rem;
            }
          }
          .phone {
          }
          .qq {
          }
          .show {
          }
        }
      }
      .qrcode {
        width: 0.92rem;
        height: 0.92rem;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 0.88rem;
          height: 0.88rem;
        }
      }
    }
  }
}
</style>
